import { useState } from "react";
import "./App.css";
import React from "react";
import routes from "./router/index";
import { useRoutes } from "react-router-dom";
import { NavLink , useNavigate} from "react-router-dom";
import { SearchOutlined } from "@ant-design/icons";
import { Button, Tooltip, Space } from "antd";


function App() {
  let [qwe,setQwe]=useState([])
  // hooks
  const routerView = useRoutes(routes);
  const navigate = useNavigate()
 function add(e){
    setQwe(e.target.value)
 }
 function adds(){
  navigate("/gds",{state:{cai:qwe}})
}
  return (
    <div className="App">
      <div className="header-box">
        <header>
          <div className="top">
            <img src="../src/assets/logo.png" alt="" />
            <div className="search-box">
              <input type="text" placeholder="请输入想要的商品" onChange={add} value={qwe}/>
              <Space direction="vertical">
                <Space wrap>
                  <Button onClick={adds} icon={<SearchOutlined />}>搜索</Button>
                </Space>
              </Space>
            </div>
          </div>
        </header>
        <div className="nav-box">
          <div className="navs">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/login">登录</NavLink>
            <NavLink to="/user">注册</NavLink>
          </div>
        </div>
      </div>
      {routerView}
    </div>
  );
}

export default App;
